M
MLOG
Reacti laisklaadimine: komponentide koodijagamine optimeeritud jõudluse saavutamiseks | MLOG | MLOG ); } export default ImageGallery;

Ja Image.js komponent:


import React from 'react';

const Image = ({ src, alt }) => {
  return {alt};
};

export default Image;

Selles näites on iga pilt mähitud <Suspense> komponendiga, nii et iga pildi laadimise ajal kuvatakse laadimisteade. See hoiab ära kogu lehe blokeerimise piltide allalaadimise ajal.

Täpsemad tehnikad ja kaalutlused

1. Veapiirid (Error Boundaries)

Laisklaadimise kasutamisel on oluline käsitleda võimalikke vigu, mis võivad laadimisprotsessi käigus tekkida. Veapiire saab kasutada nende vigade püüdmiseks ja varu-kasutajaliidese kuvamiseks. Saate luua veapiiri komponendi selliselt:


import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Uuenda olekut, et järgmine renderdus näitaks varu-kasutajaliidest.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Saate vea logida ka veaaruandlusteenusesse
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Saate renderdada mis tahes kohandatud varu-kasutajaliidese
      return 
Midagi läks valesti.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

Seejärel mähkige <Suspense> komponent <ErrorBoundary> komponendiga:



  Laadimine...}>

Kui MyComponent laadimisel tekib viga, püüab <ErrorBoundary> selle kinni ja kuvab varu-kasutajaliidese.

2. Serveripoolne renderdamine (SSR) ja laisklaadimine

Laisklaadimist saab kasutada ka koos serveripoolse renderdamisega (SSR), et parandada teie rakenduse esmast laadimisaega. See nõuab aga täiendavat seadistamist. Peate tagama, et server suudab dünaamilisi importe õigesti käsitleda ja et laisklaaditud komponendid oleksid kliendi poolel korralikult hüdreeritud.

Tööriistad nagu Next.js ja Gatsby.js pakuvad sisseehitatud tuge laisklaadimisele ja koodijagamisele SSR-keskkondades, muutes protsessi palju lihtsamaks.

3. Laisklaaditud komponentide eellaadimine

Mõnel juhul võiksite laisklaaditud komponendi eellaadida enne, kui seda tegelikult vaja on. See võib olla kasulik komponentide puhul, mida tõenäoliselt varsti renderdatakse, näiteks komponendid, mis asuvad lehe nähtavast osast allpool, kuid mis tõenäoliselt keritakse vaatesse. Saate komponendi eellaadida, kutsudes käsitsi välja funktsiooni import():


import('./MyComponent'); // Eellaadi MyComponent

See alustab komponendi laadimist taustal, nii et see on kiiremini kättesaadav, kui seda tegelikult renderdatakse.

4. Dünaamilised impordid Webpacki maagiliste kommentaaridega

Webpacki "maagilised kommentaarid" pakuvad võimalust genereeritud kooditükkide nimede kohandamiseks. See võib olla abiks teie rakenduse paketistruktuuri silumisel ja analüüsimisel. Näiteks:


const MyComponent = React.lazy(() => import(/* webpackChunkName: "my-component" */ './MyComponent'));

See loob kooditüki nimega "my-component.js" (või sarnase) geneerilise nime asemel.

5. Levinud vigade vältimine

Reaalse maailma näited ja kasutusjuhud

Laisklaadimist saab rakendada mitmesugustes stsenaariumides Reacti rakenduste jõudluse parandamiseks. Siin on mõned näited:

Näide: Rahvusvaheline e-kaubanduse veebisait

Kujutage ette e-kaubanduse veebisaiti, mis müüb tooteid ülemaailmselt. Erinevates riikides võivad olla erinevad valuutad, keeled ja tootekataloogid. Selle asemel, et laadida kohe alguses kõigi riikide andmeid, saate kasutada laisklaadimist, et laadida kasutaja asukohale spetsiifilised andmed alles siis, kui ta saiti külastab.


const CurrencyFormatter = React.lazy(() => import(`./CurrencyFormatter/${userCountry}`))
const ProductCatalog = React.lazy(() => import(`./ProductCatalog/${userCountry}`))

function ECommerceSite() {
  const userCountry = getUserCountry(); // Funktsioon kasutaja riigi määramiseks

  return (
    Sisu laadimine teie piirkonna jaoks...}>
      
      
    
  );
}

Kokkuvõte

Laisklaadimine ja komponentide koodijagamine on võimsad tehnikad Reacti rakenduste jõudluse optimeerimiseks. Laadides komponente ainult siis, kui neid on vaja, saate oluliselt vähendada esmast laadimisaega, parandada kasutajakogemust ja täiustada oma SEO-d. Reacti sisseehitatud React.lazy() ja <Suspense> komponendid muudavad laisklaadimise rakendamise teie projektides lihtsaks. Võtke need tehnikad omaks, et luua kiiremaid, reageerivamaid ja kaasahaaravamaid veebirakendusi ülemaailmsele publikule.

Pidage meeles, et laisklaadimise rakendamisel tuleb alati arvestada kasutajakogemusega. Pakkuge informatiivseid varu-kasutajaliideseid, käsitlege võimalikke vigu sujuvalt ja analüüsige hoolikalt oma rakenduse jõudlust, et tagada soovitud tulemuste saavutamine. Ärge kartke katsetada erinevaid lähenemisviise ja leida oma konkreetsetele vajadustele parim lahendus.